<!doctype html>
<!--[if lte IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <meta name="description" content="Cascading grid layout library" />

  <title>Masonry Appendix</title>

  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Noto+Sans:400,700,400italic" />

  
    <!-- DEV MODE - including each .css file -->
    
      <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
    
      <link rel="stylesheet" href="css/base.css" />
    
      <link rel="stylesheet" href="css/code.css" />
    
      <link rel="stylesheet" href="css/demos.css" />
    
      <link rel="stylesheet" href="css/footer.css" />
    
      <link rel="stylesheet" href="css/hero.css" />
    
      <link rel="stylesheet" href="css/icons.css" />
    
      <link rel="stylesheet" href="css/index.css" />
    
      <link rel="stylesheet" href="css/layout.css" />
    
      <link rel="stylesheet" href="css/modules.css" />
    
      <link rel="stylesheet" href="css/site-nav.css" />
    
  

  
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@desandro" />
  <meta name="twitter:url" content="http://masonry.desandro.com/appendix.html" />
  <meta name="twitter:title" content="Masonry Appendix" />
  <meta name="twitter:description" content="Cascading grid layout library" />

  

</head>
<body class="appendix-page" data-page="appendix">

  <div id="site-nav">
    <div class="primary-content">
      <h1><a href=".">Masonry</a></h1>
      <ol>
        <li class="nav-options"><a href="options.html">Options</a></li>
        <li class="nav-methods"><a href="methods.html">Methods</a></li>
        <li class="nav-events"><a href="events.html">Events</a></li>
        <li class="nav-appendix"><a href="appendix.html">Appendix</a></li>
        <li class="nav-faq"><a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  
  

  <div id="content">

    <div class="primary-content">
      
        <h1>Appendix</h1>
        

      
      
        <ul id="page-nav">
          
            <li><a href="#imagesloaded">imagesLoaded</a></li>
          
            <li><a href="#web-fonts">Web fonts</a></li>
          
            <li><a href="#component-libraries">Component libraries</a></li>
          
            <li><a href="#submitting-issues">Submitting issues</a></li>
          
            <li><a href="#upgrading-from-v2">Upgrading from v2</a></li>
          
            <li><a href="#requirejs">RequireJS</a></li>
          
            <li><a href="#additional-resources">Additional resources</a></li>
          
        </ul>
      
    </div>

    
    
<div class="primary-content">

<h2 id="imagesloaded">imagesLoaded</h2>

<p>Unloaded images can throw off Masonry layouts and cause item elements to overlap. <a href="http://desandro.github.io/imagesloaded/">imagesLoaded</a> resolves this issue. imagesLoaded works by triggering a callback after all child images have been loaded.</p>

<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
<span class="keyword">var</span> msnry;
<span class="comment">// initialize Masonry after all images have loaded</span>
imagesLoaded( container, <span class="keyword">function</span>() {
  msnry = <span class="keyword">new</span> Masonry( container );
});</code></pre>

<pre><code class="js"><span class="comment">// or with jQuery</span>
<span class="keyword">var</span> $container = $(<span class="string">'#container'</span>);
<span class="comment">// initialize Masonry after all images have loaded  </span>
$container.imagesLoaded( <span class="keyword">function</span>() {
  $container.masonry();
});</code></pre>


<p>Or initialize Masonry first, then trigger <a href="methods.html#layout"><code>layout</code></a> after images have loaded.</p>

<pre><code class="js"><span class="comment">// initialize Masonry</span>
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container );
<span class="comment">// layout Masonry again after all images have loaded</span>
imagesLoaded( container, <span class="keyword">function</span>() {
  msnry.layout();
});</code></pre>

<pre><code class="js"><span class="comment">// or with jQuery</span>
<span class="comment">// initialize Masonry</span>
<span class="keyword">var</span> $container = $(<span class="string">'#container'</span>).masonry();
<span class="comment">// layout Masonry again after all images have loaded</span>
$container.imagesLoaded( <span class="keyword">function</span>() {
  $container.masonry();
});</code></pre>


</div><div class="primary-content">

<h2 id="web-fonts">Web fonts</h2>

<p>Like images, unloaded web fonts can throw off Masonry. To resolve this, trigger <a href="methods.html#layout"><code>layout</code></a> after fonts have been loaded. Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.</p>

<ul>
  <li><a href="http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/">Typekit font events</a></li>
  <li><a href="https://developers.google.com/webfonts/docs/webfont_loader#Events">Google WebFont Loader: Events</a></li>
</ul>

<h3 id="typekit">Typekit</h3>

<p>Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit’s default script, <code>try{Typekit.load();}catch(e){}</code>.</p>

<pre><code class="js"><span class="keyword">var</span> msnry;

<span class="function"><span class="keyword">function</span> <span class="title">triggerMasonry</span><span class="params">()</span> {</span>
  <span class="comment">// don't proceed if masonry has not been initialized</span>
  <span class="keyword">if</span> ( !msnry ) {
    <span class="keyword">return</span>;
  }
  msnry.layout();
}
<span class="comment">// initialize masonry on document ready</span>
docReady( <span class="keyword">function</span>() {
  <span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
  msnry = <span class="keyword">new</span> Masonry( container, {
    <span class="comment">// options...</span>
  });
});
<span class="comment">// trigger masonry when fonts have loaded</span>
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});</code></pre>


<pre><code class="js"><span class="comment">// or with jQuery</span>
<span class="keyword">var</span> $container;

<span class="function"><span class="keyword">function</span> <span class="title">triggerMasonry</span><span class="params">()</span> {</span>
  <span class="comment">// don't proceed if $container has not been selected</span>
  <span class="keyword">if</span> ( !$container ) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// init Masonry</span>
  $container.masonry({
    <span class="comment">// options...</span>
  });
}
<span class="comment">// trigger masonry on document ready</span>
$(<span class="keyword">function</span>(){
  $container = $(<span class="string">'#container'</span>);
  triggerMasonry();
});
<span class="comment">// trigger masonry when fonts have loaded</span>
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});</code></pre>


</div><div class="primary-content">

<h2 id="component-libraries">Component libraries</h2>

<p>Masonry includes several component libraries. You might have seen these used in the example code. You can use some of these libraries in your own code.</p>

<h3 id="docready">docReady</h3>

<p><a href="https://github.com/desandro/doc-ready">docReady triggers initialization logic when the document is ready,</a> just like jQuery's <code>$(document).ready()</code>. <code>docReady</code> is used to initialize all the demos in these docs.</p>

<pre><code class="js">docReady( <span class="keyword">function</span>() {
  <span class="comment">// document is ready, let's do some fun stuff!</span>
  <span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
  <span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container );
});</code></pre>


<h3 id="classie">classie</h3>

<p><a href="https://github.com/desandro/classie">classie has class helper functions.</a> classie is not included with Masonry.</p>

<pre><code class="js">classie.has( element, <span class="string">'my-class'</span> ) <span class="comment">// returns true/false</span>
classie.add( element, <span class="string">'my-new-class'</span> ) <span class="comment">// add new class</span>
classie.remove( element, <span class="string">'my-unwanted-class'</span> ) <span class="comment">// remove class</span>
classie.toggle( element, <span class="string">'my-class'</span> ) <span class="comment">// toggle class</span></code></pre>


<h3 id="eventie">eventie</h3>

<p><a href="https://github.com/desandro/eventie">Eventie makes event binding in IE8 legit.</a></p>

<pre><code class="js"><span class="keyword">var</span> elem = document.querySelector(<span class="string">'#my-elem'</span>);
<span class="function"><span class="keyword">function</span> <span class="title">onElemClick</span><span class="params">( event )</span> {</span>
  console.log( event.type + <span class="string">' just happened on #'</span> + event.target.id );
  <span class="comment">// -&gt; click just happened on #my-elem</span>
}
<span class="comment">// bind it</span>
eventie.bind( elem, <span class="string">'click'</span>, onElemClick );
<span class="comment">// unbind it</span>
eventie.unbind( elem, <span class="string">'click'</span>, onElemClick );</code></pre>

</div><div id="submitting-issues" class="primary-content">

<h2>Submitting issues</h2>
<h3>Reduced test case required</h3>
<p>All bug reports and problem issues require a reduced test case. See <a href="http://css-tricks.com/reduced-test-cases/">CSS Tricks - Reduced Test Cases</a> on why they <em>&quot;are the absolute, ... number one way to troubleshoot bugs.&quot;</em></p>
<ul>
<li>A reduced test case is an isolated example that demonstrates the bug or issue.</li>
<li>It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling.</li>
<li>Any one of the <a href="http://codepen.io/desandro/tag/masonry-docs">CodePen examples</a> in <a href="http://masonry.desandro.com">the docs</a> may be forked and used to build your reduced test case.</li>
<li>A link to your site is <strong>not</strong> a reduced test case.</li>
<li>Until you provide a reduced test case, your issue will be closed.</li>
</ul>
<p>I realize this guideline may seem a little harsh, but it dramatically helps both of you and me. Reduced test cases help you identify the issue at hand and understand your own code. On my side, they greatly reduce the amount of time spent resolving the issue.</p>


</div><div class="primary-content">

<h2 id="upgrading-from-v2">Upgrading from v2</h2>

<ul>
  <li>smartresize jQuery plugin has been removed</li>
  <li><a href="http://desandro.github.io/imagesloaded/">imagesLoaded</a> no longer included, but is still recommended.</li>
  <li>jQuery animation has been removed. <code>animationOptions</code> has been removed. This means no animation for in IE8 and IE9.</li>
  <li>Corner stamp is now integrated as <a href="options.html#stamp"><code>stamp</code> option</a> and <a href="methods.html#stamp"><code>stamp</code> method</a></li>
  <li><code>isRTL</code> option removed, use <a href="options.html#isoriginleft"><code>isOriginLeft: false</code></a> instead</li>
  <li><code>isResizable</code> option renamed to <a href="options.html#isresizebound"><code>isResizeBound</code></a></li>
  <li><code>layout</code> method renamed to <a href="methods.html#layoutitems"><code>layoutItems</code></a></li>
  <li><code>gutterWidth</code> option renamed to <a href="options.html#gutter"><code>gutter</code></a></li>
</ul>

</div><div class="primary-content">

<h2 id="requirejs">RequireJS</h2>

<p>Masonry is compatible with <a href="http://requirejs.org">RequireJS</a>. Some configuration is required for its dependencies. All dependencies can be installed with <a href="http://bower.io">Bower</a>.</p>

<p>Set <a href="http://requirejs.org/docs/api.html#config-paths">config paths</a> for all Masonry's dependencies.</p>

<pre><code class="js">requirejs.config({
  paths: {
    eventie: <span class="string">'bower_components/eventie'</span>,
    <span class="string">'doc-ready'</span>: <span class="string">'bower_components/doc-ready'</span>,
    eventEmitter: <span class="string">'bower_components/eventEmitter'</span>,
    <span class="string">'get-style-property'</span>: <span class="string">'bower_components/get-style-property'</span>,
    <span class="string">'get-size'</span>: <span class="string">'bower_components/get-size'</span>,
    <span class="string">'matches-selector'</span>: <span class="string">'bower_components/matches-selector'</span>,
    outlayer: <span class="string">'bower_components/outlayer'</span>,
    masonry: <span class="string">'bower_components/masonry'</span>
  }
});

requirejs( [ <span class="string">'masonry/masonry'</span> ], <span class="keyword">function</span>( Masonry ) {
  <span class="keyword">new</span> Masonry( <span class="comment">/*...*/</span> )
});</code></pre>


<p>Or, you can set <a href="http://requirejs.org/docs/api.html#config-baseUrl">baseUrl</a> to bower_components and set a path config for all your application code.</p>

<pre><code class="js">requirejs.config({
  baseUrl: <span class="string">'bower_components/'</span>,
  paths: {
    app: <span class="string">'../'</span>
  }
});

requirejs( [ <span class="string">'masonry/masonry'</span>, <span class="string">'app/my-component.js'</span> ], <span class="keyword">function</span>( Masonry, myComp ) {
  <span class="keyword">new</span> Masonry( <span class="comment">/*...*/</span> )
});</code></pre>


</div><div class="primary-content">

<h2 id="additional-resources">Additional resources</h2>

<ul>
  <li>The <a href="http://metafizzy.co/blog/">Metafizzy blog</a> has posts that cover specialized use cases</li>
  <li><a href="http://stackoverflow.com/users/182183/desandro?tab=answers">My answers on Stack Overflow</a></li>
  <li><a href="http://www.delicious.com/desandro/jquerymasonry">Sites using Masonry on Delicious</a></li>
  <li><a href="http://zootool.com/user/desandro/tag:masonry">Sites using Masonry on Zootool</a> (has screenshots)</li>
  <li><a href="http://stackoverflow.com/search?q=masonry">Stack Overflow questions about Masonry</a></li>
  <li><a href="http://www.delicious.com/desandro/re:masonry">Related Masonry links</a></li>
  <li>Other resources that are <a href="http://www.delicious.com/desandro/likemasonrybutnot">like Masonry but not</a></li>
</ul>

</div>


  </div>

  <div id="footer">
    <div class="primary-content">
      Masonry by <a href="http://desandro.com">David DeSandro</a>. Make something rad with it.
    </div>
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>


  <!-- DEV MODE - including each .js file -->
  
    <script src="bower_components/classie/classie.js"></script>
  
    <script src="bower_components/eventie/eventie.js"></script>
  
    <script src="bower_components/doc-ready/doc-ready.js"></script>
  
    <script src="bower_components/get-style-property/get-style-property.js"></script>
  
    <script src="bower_components/eventEmitter/EventEmitter.js"></script>
  
    <script src="bower_components/imagesloaded/imagesloaded.js"></script>
  
    <script src="bower_components/get-size/get-size.js"></script>
  
    <script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
  
    <script src="bower_components/matches-selector/matches-selector.js"></script>
  
    <script src="bower_components/outlayer/item.js"></script>
  
    <script src="bower_components/outlayer/outlayer.js"></script>
  
    <script src="bower_components/masonry/masonry.js"></script>
  
    <script src="js/controller.js"></script>
  
    <script src="js/pages/events.js"></script>
  
    <script src="js/pages/faq.js"></script>
  
    <script src="js/pages/index.js"></script>
  
    <script src="js/pages/methods.js"></script>
  




</body>
</html>
